<script setup lang="ts">
import { ref } from 'vue';

// 订单数据
const orders = ref([
  {
    id: 'ORD-2024-1001',
    type: 'hotel',
    title: '上海外滩华尔道夫酒店',
    date: '2024-05-10',
    checkIn: '2024-06-15',
    checkOut: '2024-06-17',
    guests: 2,
    amount: '¥4,200',
    status: 'confirmed',
    image: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.KpZvYONJV2cYLOuIlG6Z7wAAAA?rs=1&pid=ImgDetMain'
  },
  {
    id: 'ORD-2024-0985',
    type: 'flight',
    title: '北京 → 上海',
    date: '2024-05-01',
    departureDate: '2024-05-20',
    departureTime: '08:30',
    arrivalTime: '10:45',
    passengers: 1,
    amount: '¥680',
    status: 'confirmed',
    image: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.3Y5iNP_Uv_CVuJHINBpJawHaDb?rs=1&pid=ImgDetMain'
  },
  {
    id: 'ORD-2024-0879',
    type: 'tour',
    title: '东京三日游',
    date: '2024-04-15',
    tourDate: '2024-07-10',
    duration: '3天2晚',
    participants: 2,
    amount: '¥5,600',
    status: 'pending',
    image: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.3Y5iNP_Uv_CVuJHINBpJawHaDb?rs=1&pid=ImgDetMain'
  },
  {
    id: 'ORD-2024-0756',
    type: 'hotel',
    title: '巴黎丽兹酒店',
    date: '2024-03-20',
    checkIn: '2024-04-05',
    checkOut: '2024-04-08',
    guests: 2,
    amount: '¥8,040',
    status: 'completed',
    image: 'https://ts1.tc.mm.bing.net/th/id/R-C.d14aa6ca31627a77a9539e97beaf2447?rik=aZUYZJxcko7kpg&riu=http%3a%2f%2f5b0988e595225.cdn.sohucs.com%2fimages%2f20170904%2fa7afdfb8c5fa44e48039a502d6d469a8.jpeg&ehk=Zmv7HtxGY4TD81Kq6zPgiknEgbIcVBUyyetcXw80psw%3d&risl=&pid=ImgRaw&r=0'
  }
]);

// 筛选条件
const activeFilter = ref('all');

// 筛选订单
const filteredOrders = () => {
  if (activeFilter.value === 'all') {
    return orders.value;
  }
  return orders.value.filter(order => order.status === activeFilter.value);
};

// 获取订单类型图标
const getOrderTypeIcon = (type: string) => {
  switch (type) {
    case 'hotel': return '🏨';
    case 'flight': return '✈️';
    case 'tour': return '🧳';
    default: return '📋';
  }
};

// 获取订单状态标签
const getStatusLabel = (status: string) => {
  switch (status) {
    case 'confirmed': return '已确认';
    case 'pending': return '待付款';
    case 'completed': return '已完成';
    case 'cancelled': return '已取消';
    default: return status;
  }
};

// 获取订单状态类名
const getStatusClass = (status: string) => {
  switch (status) {
    case 'confirmed': return 'status-confirmed';
    case 'pending': return 'status-pending';
    case 'completed': return 'status-completed';
    case 'cancelled': return 'status-cancelled';
    default: return '';
  }
};
</script>

<template>
  <div class="user-orders">
    <h2 class="section-title">我的订单</h2>
    
    <div class="order-filters">
      <button 
        class="filter-btn" 
        :class="{ active: activeFilter === 'all' }"
        @click="activeFilter = 'all'"
      >
        全部订单
      </button>
      <button 
        class="filter-btn" 
        :class="{ active: activeFilter === 'pending' }"
        @click="activeFilter = 'pending'"
      >
        待付款
      </button>
      <button 
        class="filter-btn" 
        :class="{ active: activeFilter === 'confirmed' }"
        @click="activeFilter = 'confirmed'"
      >
        已确认
      </button>
      <button 
        class="filter-btn" 
        :class="{ active: activeFilter === 'completed' }"
        @click="activeFilter = 'completed'"
      >
        已完成
      </button>
    </div>
    
    <div class="order-list">
      <div v-for="order in filteredOrders()" :key="order.id" class="order-card">
        <div class="order-image">
          <img :src="order.image" :alt="order.title">
          <div class="order-type">{{ getOrderTypeIcon(order.type) }}</div>
        </div>
        
        <div class="order-details">
          <div class="order-header">
            <h3 class="order-title">{{ order.title }}</h3>
            <div class="order-id">订单号: {{ order.id }}</div>
          </div>
          
          <div class="order-info">
            <template v-if="order.type === 'hotel'">
              <div class="info-row">
                <span class="info-label">入住日期:</span>
                <span class="info-value">{{ order.checkIn }} 至 {{ order.checkOut }}</span>
              </div>
              <div class="info-row">
                <span class="info-label">入住人数:</span>
                <span class="info-value">{{ order.guests }}人</span>
              </div>
            </template>
            
            <template v-else-if="order.type === 'flight'">
              <div class="info-row">
                <span class="info-label">出发日期:</span>
                <span class="info-value">{{ order.departureDate }}</span>
              </div>
              <div class="info-row">
                <span class="info-label">航班时间:</span>
                <span class="info-value">{{ order.departureTime }} - {{ order.arrivalTime }}</span>
              </div>
              <div class="info-row">
                <span class="info-label">乘客人数:</span>
                <span class="info-value">{{ order.passengers }}人</span>
              </div>
            </template>
            
            <template v-else-if="order.type === 'tour'">
              <div class="info-row">
                <span class="info-label">出行日期:</span>
                <span class="info-value">{{ order.tourDate }}</span>
              </div>
              <div class="info-row">
                <span class="info-label">行程:</span>
                <span class="info-value">{{ order.duration }}</span>
              </div>
              <div class="info-row">
                <span class="info-label">出行人数:</span>
                <span class="info-value">{{ order.participants }}人</span>
              </div>
            </template>
            
            <div class="info-row">
              <span class="info-label">下单日期:</span>
              <span class="info-value">{{ order.date }}</span>
            </div>
          </div>
        </div>
        
        <div class="order-actions">
          <div class="order-amount">{{ order.amount }}</div>
          <div class="order-status" :class="getStatusClass(order.status)">
            {{ getStatusLabel(order.status) }}
          </div>
          <button class="details-btn">查看详情</button>
          <button v-if="order.status === 'pending'" class="pay-btn">立即支付</button>
        </div>
      </div>
      
      <div v-if="filteredOrders().length === 0" class="no-orders">
        暂无订单记录
      </div>
    </div>
  </div>
</template>

<style scoped>
.user-orders {
  color: #333;
}

.section-title {
  margin-top: 0;
  margin-bottom: 25px;
  font-size: 22px;
  color: #333;
  border-bottom: 1px solid #eee;
  padding-bottom: 15px;
}

.order-filters {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.filter-btn {
  padding: 8px 15px;
  border: 1px solid #ddd;
  background-color: white;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s;
}

.filter-btn.active {
  background-color: #0066cc;
  color: white;
  border-color: #0066cc;
}

.order-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.order-card {
  display: flex;
  background-color: #f9f9f9;
  border-radius: 8px;
  overflow: hidden;
}

.order-image {
  width: 150px;
  height: 150px;
  position: relative;
}

.order-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.order-type {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 30px;
  height: 30px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.order-details {
  flex: 1;
  padding: 15px;
}

.order-header {
  margin-bottom: 10px;
}

.order-title {
  margin: 0 0 5px 0;
  font-size: 18px;
}

.order-id {
  font-size: 14px;
  color: #666;
}

.order-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.info-row {
  display: flex;
  font-size: 14px;
}

.info-label {
  color: #666;
  width: 80px;
}

.order-actions {
  width: 150px;
  padding: 15px;
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-left: 1px solid #eee;
}

.order-amount {
  font-size: 20px;
  font-weight: bold;
  color: #0066cc;
  margin-bottom: 10px;
}

.order-status {
  padding: 4px 10px;
  border-radius: 15px;
  font-size: 12px;
  margin-bottom: 15px;
}

.status-confirmed {
  background-color: #e6f7ff;
  color: #0066cc;
}

.status-pending {
  background-color: #fff7e6;
  color: #fa8c16;
}

.status-completed {
  background-color: #f6ffed;
  color: #52c41a;
}

.status-cancelled {
  background-color: #fff1f0;
  color: #f5222d;
}

.details-btn {
  width: 100%;
  padding: 8px 0;
  background-color: white;
  border: 1px solid #0066cc;
  color: #0066cc;
  border-radius: 4px;
  cursor: pointer;
  margin-bottom: 10px;
  transition: all 0.2s;
}

.details-btn:hover {
  background-color: #f0f8ff;
}

.pay-btn {
  width: 100%;
  padding: 8px 0;
  background-color: #0066cc;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.pay-btn:hover {
  background-color: #0055aa;
}

.no-orders {
  padding: 30px;
  text-align: center;
  background-color: #f9f9f9;
  border-radius: 8px;
  color: #666;
}

@media (max-width: 768px) {
  .order-card {
    flex-direction: column;
  }
  
  .order-image {
    width: 100%;
    height: 200px;
  }
  
  .order-actions {
    width: 100%;
    border-left: none;
    border-top: 1px solid #eee;
  }
}
</style> 